<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/mui.css" />
</head>
<style type="text/css">
	ul {
		list-style-type: none;
	}

	a:hover {
		text-decoration: none
	}

	#userlist {
		padding-top: 28px;
		padding-left: 20px;
		color: white;
	}

	#userlist div {
		font-size: 18px;
	}

	#userlist span a {
		margin: 10px;
		font-size: 12px;
		color: white;
	}

	#shopplist {
		margin-top: 30px;
	}

	#shopplist li a img {
		margin-right: 10px;
	}
</style>

<body>
<!-- 主界面不动、菜单移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
	<!-- 菜单容器 -->
	<aside class="mui-off-canvas-left" id="offCanvasSide">
		<div class="mui-scroll-wrapper" style="background-color: #F7F7F7;">
			<div class="mui-scroll">
				<!-- 菜单具体展示内容 -->
				<!--<div class="container-fluid"></div>-->
				<div class="row" style="height: 110px;background:#23CAD0 ;">
					<div class="col-xs-4">
						<img src="img/zs.png" class="img-circle" style="width:120%;margin: 10px;">
					</div>
					<div class="col-xs-8" id="userlist">
						<div >张三</div>
						<div >136****6887</div>
						<span style="float: right;"><a href="#">更换手机号</a></span>
					</div>
				</div>
				<!--信息列表-->
				<ul class="mui-table-view" id="shopplist">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right"><img src="img/car.png" style="width: 15%;" /><span>我的发货单</span></a>
					</li>
					<li class="mui-table-view-cell" style="background-color: #F7F7F7;">
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right"><img src="img/msg.png" style="width: 13%;" /> <span>我的评价</span></a>
					</li>
					<li class="mui-table-view-cell" style="background-color: #F7F7F7;">
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right"><img src="img/arrow.png" style="width: 9%;" /> <span>我的收货地址</span></a>
					</li>
				</ul>
			</div>
		</div>
	</aside>
	<!-- 主页面容器 -->
	<div class="mui-inner-wrap">
		<!-- 主页面标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!-- 主界面具体展示内容 -->

			</div>
		</div>
		<div class="mui-off-canvas-backdrop"></div>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
	mui.init();
</script>
</body>

</html>